<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>保险智能分析系统</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css">
<script type="text/javascript" src="libs/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="libs/bootstrap/bootstrap.min.js"></script>
<style>
	body,h3,p{margin: 0;padding: 0;font-family: '微软雅黑';}
	img{
		border: 0;
	}
	body{
		 background-image: url('image/BG.png'); 
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;		
	}
		.navbar{ 
		background: #ffffff; 
		color: #666666; 
		font-weight: normal;
		border-bottom: 1px solid #e7e7e7;
	}
	.navbar-header{
		float:none;
	}
	.navbar h3{
		font-size: 20px;
		font-weight: bold;
		line-height: 50px;
		letter-spacing: 1px;
		text-align: center;
	}
	.navbar h3 span{
		font-weight: normal;
		padding-left: 10px;
		margin-left: 10px;
		border-left: 1px solid #999999;
	}	
	.navbar a{
		color: #747474;
		font-size: 20px;
		position:absolute;
		top:15px;
		left:10px;
	}
	.navbar a:focus,.navbar a:hover{
		text-decoration: none;
	}	
	.foot{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 70px;
	}
	.foot_con{
		width: 75%;
		margin: 0 auto;
	}
	.flex_div{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}	
	.line_div{
		width: 80px;
		height: 100px;
		background: url('image/line.png') no-repeat center/80px 12px;
	}
	.foot div.Label{
		color: #fba372;
		font-size: 22px;
		width: 92px;
		height: 92px;
		border: 4px solid #fcb38b;
		border-radius: 100px;
		box-sizing: content-box;
	}
	.foot div.Label_active{
		color: #fff;
		background: #f9752b;
	}	
	.foot .Label div{
		width: 92px;
		height: 46px;
		text-align: center;
	}
	.foot .top_p{
	    display: table-cell;
	    text-align: center;
	    vertical-align: bottom;		
	}
	.foot .bottom_p{
		vertical-align: top;
	}
	.end{
		color: #bdbdbd;
		font-size: 16px;
		text-align: center;
		letter-spacing: 2px;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 15px;
	}

	/* 内容 */
	.content{
		padding:0 30px;
		overflow: hidden;
	}
	@media (min-width: 992px){
		.content{
			margin-top: 3% !important;
		}
	}	
	@media (min-width: 768px){
		.content{
			margin-top: 30%;
		}
	}
	.page-header{
		text-align: center;
		border:0;
	}
	.comp{
		margin:30px 0;
		font-size: 18px;
		text-align: center;
	}
	.comp_t{
		height:50px;
		border-radius: 5px;
		background: #fba372;
		text-align: center;
		line-height: 50px;
		font-size: 20px;
		color: #333;
	}
	.squre{
		display: block;
		width:20px;
		height:20px;
		margin:-10px auto 0;
		-moz-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg); 
		background: #fba372;
	}
	.comp_r .comp_t{
		background: #ccc;
	}
	.comp_r .squre{
		background: #ccc;
	}
	.comp_v{
		width:40px;
		height:40px;
		border:2px solid #f9752b;
		border-radius: 50%;
		color: #f9752b;
		line-height: 40px;
		text-align: center;
		font-size: 18px;
		margin:5px auto;
		font-weight: bold;
	}
	.comp_l{
		color: #f9752b;
	}
	.comp_r{
		color: #666;
	}
	.comp_c{
		color: #777;
		line-height: 50px;
	}
</style>
</head>
<body>
	<nav class="navbar">
		<div class="container">
			<div class="navbar-header">
				<h3 class="text-center">招商银行<span>智能分析</span></h3>
				<a href="javascript:void(0)" onClick="javascript :history.go(-1);"
					class="glyphicon glyphicon-chevron-left"></a>
			</div>
		</div>
	</nav>
	<div class="content">
		<div class="page-header">
		    <h2>财务规划建议方案比较</h2>
		</div>
		<div class="clearfix comp"> 
			<div class="col-sm-5 comp_l">
				<div class="comp_t">方案一</div>
				<span class="squre"></span>
			</div>
			<div class="col-sm-2">
				<div class="comp_v">VS</div>
			</div>
			<div class="col-sm-5 comp_r">
				<div class="comp_t">方案二</div>
				<span class="squre"></span>
			</div>
		</div>
		<div class="clearfix comp"> 
			<div class="col-sm-5 comp_l">
				缴足20年后收益<br>
				40000元/年
			</div>
			<div class="col-sm-2 comp_c">
				利益
			</div>
			<div class="col-sm-5 comp_r">
				缴足15年后收益<br>
				40000元/年
			</div>
		</div>
		<div class="clearfix comp"> 
			<div class="col-sm-5 comp_l">
				30000元/年
			</div>
			<div class="col-sm-2 comp_c" style="line-height: 25px;">
				缴纳
			</div>
			<div class="col-sm-5 comp_r">
				40000元/年
			</div>
		</div>
	</div>
    <div class="foot">
    	<div class="foot_con">
    		<div class="flex_div">
		     	<div class="Label">
		   			<div class="top_p">基础</div>
		   			<div class="bottom_p">信息</div>
		   		</div>
		   		<div class="line_div"></div>
		    	<div class="Label">
		   			<div class="top_p">定性</div>
		   			<div class="bottom_p">分析</div>
		   		</div>
		   		<div class="line_div"></div>
		    	<div class="Label">
		   			<div class="top_p">定量</div>
		   			<div class="bottom_p">分析</div>
		   		</div>
		   		<div class="line_div"></div>
		    	<div class="Label Label_active">
		   			<div class="top_p">诊断</div>
		   			<div class="bottom_p">分析</div>
		   		</div>    			
    		</div>
    	</div>
    </div>
    <p class="end">版权归信诚人寿所有</p>
</body>
<script>
	$(function(){
		
	});
</script>
</html>